<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Three Column Portfolio Template for Bootstrap 3</title>

    <!-- JavaScript -->
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/product.js"></script>
    
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    
    <!-- Custom CSS for the '3 Col Portfolio' Template -->
    <link href="css/3-col-portfolio.css" rel="stylesheet">
</head>

<body onload="createItems()">
    <!-- this div is for banner and nav bar -->
    <div id="pageHeader"></div>
 
    <!-- this is a place to show all the items -->
    <div class="container">
        
        <div class="row">

            <div class="col-lg-12">
                <h1 class="page-header">Online Basket
                    <small>Welcome</small>
                        
                </h1>
            </div>

        </div>
        
        <div class="col-lg-7" id="leftContent"></div>
       
        <div class="col-lg-5">
        
             <div class='panel panel-primary'>
                 <div class="panel-heading">Currency Conversion</div>
                 <div class='panel-body'>
                     <div class='row'>
                         <div class='col-lg-4'>
                             Select Currency 
                         </div>
                         <div class='col-lg-8'>
                            <select id="currencyType" class='form-control'>            
                               <option value="SGD">Singapore(SGD)</option>
                               <option value="USD">United States(USD)</option>
                               <option value="EUR">Euro(EUR)</option>
                               <option value="AUD">Australian(AUD)</option>
                            </select>
                         </div>
                     </div>
                    
                    
                 </div>
                
            </div>
            
            
            <div class="panel panel-primary">
                <div class="panel-heading">Shopping Cart</div>
                 <table class='table' width="100%" id='cart'>
                    <tr>
                        <td width="10%"></td>
                        <td>Item</td>
                        <td>Unit Price</td>
                        <td width="30%">Qty</td>
                        <td>Price</td>
                    </tr>
                 </table>
                <br/>
                <button id='removeAll' onclick="removeAll()" class="btn btn-default btn-danger"><span class="glyphicon glyphicon-trash"></span> Remove All</button>
                <button id='checkOut' onclick="checkOut()" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-shopping-cart"></span> Check Out</button>
                

            </div>
           

            </div>


    </div>
    <!-- /.container -->

     <div class="container" id="footer">
            

    
        </div>
    <!-- /.container -->

    
</body>

</html>
